<template>
   <div>
       
       <!-- 基础工具 -->
      <div class="tool flex">
          
          <img src="@/assets/function/SetColor.png" class="setColor"  @click="COLORON">
          <img src="@/assets/function/Tool.png"   @click="repairAll()">

          <!-- <el-tooltip class="item" effect="dark" content="修改颜色" placement="bottom">
            <img src="@/assets/function/SetColor.png" class="setColor"  @click="COLORON">
          </el-tooltip>

           <el-tooltip class="item" effect="dark" content="修复工具" placement="bottom">
            <img src="@/assets/function/Tool.png"   @click="repairAll()">
          </el-tooltip> -->
      </div>


        <div v-for="item in BackColor" :key="item.name" class="SetColorOne">
            <div id="Title">
               <img src="@/assets/function/风车.png" class="icon">
               {{item.label}}
               <!-- <div :style="getColor(item.BackColor)" class="selectColor"></div> -->
               <button @click="select(item.name)" class="restore">恢复默认值</button>
               <!-- <button @click="repair(item.name)" class="restore">故障维修</button> -->
            </div>
            <div id="colorBox" class="retract">
                 <div v-for="color in Colors" :key="color"  @click="select({BackColor:color,name:item.name})"
                                  :style="getColor(color)" class="color flex">
                      <div class="colorContent"  :style="getSelectColor(color,item.BackColor)"></div>                  
                  </div>
         
            </div>
            <div id="opacity" class="retract" v-if="item.Opacity || item.Opacity==0">
               <!-- <ProgressBar color="#3CC5BC" :value="item.Opacity" :name="item.name" @select="select" ref="ProgressBar"/> -->
            </div>
         </div>

   </div>
</template>
<script>
import {mapMutations,mapState} from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Setting',['BackColor','Colors'])
     },
    
     methods:{
      ...mapMutations('Setting',['REFRESHBACKCOLOR','SETBACKCOLOR','COLORON']),
       getColor:(color) => {
            if(color)
            return `border:${color} 5px solid`
       } ,
       getSelectColor:(color,selectColor)=>{
         if(color==selectColor)
         return `background:${selectColor}`
       },
       init() {
       }, 
       repairAll(){
          this.REFRESHBACKCOLOR('Navigation')
          this.REFRESHBACKCOLOR('Article')
          this.REFRESHBACKCOLOR('SmallNavi')
          let data={content:'修复成功',type:'success',icon:'el-icon-edit'}
          this.$public.AddInform(data)
       },
       repair(name){
         this.REFRESHBACKCOLOR(name)
       },
       select(value){ 
           if(typeof value == 'string'){
               
                let newData=this.BackColor.find((item)=>item.name==value)
                newData.Opacity=100
                newData={Opacity:100,BackColor:null,name:value,label:newData.label}

                this.SETBACKCOLOR({Opacity:100,BackColor:null,name:value,label:newData.label})
                this.init()
                return
           }       
           let newData=this.BackColor.find((item)=>item.name==value.name)
           newData={...newData,...value}      
           this.SETBACKCOLOR(newData)
           this.init()
           return                
       }
     },
     created(){
        this,this.init()
     },
    
    
  }
</script>
<style scoped lang='less'>
.tool{
   position: absolute;
   right: 30px;

   img{
      width: 40px;height: 40px;
      filter: drop-shadow(0 0 5px #3CC5BC) ;
   }                
   .setColor{
      width: 50px;
      height: 50px;
   }
}
.SetColorOne{
   margin-bottom: 20px;
}
.selectColor{
   width: 10px;
   height: 10px;
   border-radius: 50%;
   margin-left: 10px;
}
//标题
#Title{
   font-size: 20px;
   
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   color: var(--fontColor);
   // background: red;

   .icon{
      width: 25px;
      height: 25px;
      margin-right: 10px;
      animation: rotate 4s infinite linear;
   }

     .restore{ 
      background: var(--GeneralBackColor);
      color: white;
      padding: 5px;
       margin: 10px 10px;
      border-radius: 5px;
   }

}

//颜色
#colorBox{
   width: 100%;
   display: flex;

   
   .color{
      width: 15px;
      height: 15px;
      border-radius: 50%;
      margin: 10px 5px;
   
   .colorContent{
      padding: 5px;
      width: 60%;height: 60%;
      box-sizing: border-box;
      border-radius: 50%;
   }
}
}
//透明度
#opacity{
   width: 200px;
}
</style>